<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
    <link href="/css/flat-ui.css" rel="stylesheet">

    <script th:src="@{/webjars/jquery/3.0.0/jquery.js}"></script>
    <script th:src="@{/js/flexible.js}"></script>
    <script type="text/javascript" th:src="@{/js/flat-ui.js}"></script>
    <script th:src="@{/js/application.js}"></script>
    <script th:src="@{/js/jquery.tagsinput.js}"></script>
    <script src="https://cdn.bootcss.com/jquery-placeholder/2.3.1/jquery.placeholder.js"></script>

    <title>商品详情</title>
    <style>
        * {
            padding: 0rem;
            margin: 0rem;
        }

        #top_head {
            height: 1.6rem;
            width: 100%;
        }

        #top_head img {
            height: 1rem;
            border-radius: 0.1rem;
            margin-top: 0.5rem;
            margin-left: 0.4rem;
        }

        #top_head span {
            font-size: 0.5rem;
        }

        #content {
            width: 100%;
        }

        #content ul img {
            width: 100%;
            margin: auto;
        }

        .pro_hr {
            margin-bottom: 0.2rem;
            margin-top: 0rem;
        }
    </style>
    <script th:inline="javascript">
        function stopEvt(e) {
            e.stopPropagation();//阻止点击事件向上冒泡
        }

        function show_add_comment(user_id, username, event, comment_id) {
            event.stopPropagation();
            window.android.showCommentView(user_id, username, comment_id);
        }

        function hide_add_comment(event) {
            event.stopPropagation();
            window.android.hideCommentView();
        }

        function add_comment(user_id, comment, re_comment_id) {
            var url = "/app/add_commet/";
            var post_param = {
                "user_id": user_id,
                "comment": comment,
                "recomment_id": re_comment_id,
                "product_id": $("#product_id").val()
            };
            $.post(url, post_param, function (res) {
                if (res == "success") {
                    console.log("will reload");
                    window.android.webViewReload();
                } else {
                    console.log(res);
                }
            });
        }
    </script>
</head>
<body>
<div id="top_head" onclick="hide_add_comment(event);return false;">
    <img th:src="${user_info eq null or user_info.get('img_path') eq null} ? '' : ${user_info.get('img_path').asText()}">
    <span th:text="${user_info eq null or user_info.get('username') eq null} ? '' : ${user_info.get('username').asText()} "></span>
</div>
<hr style="width: 90%;margin-top: 0.2rem;margin-bottom: 0.2rem;" onclick="hide_add_comment(event);return false;">
<div class="bootstrap-tagsinput" style="border: 0px solid #ebedef;" onclick="hide_add_comment(event);return false;">
    <span class="badge badge badge-info"
          style="background-color: #16a085;color: white;padding-right: 0.2rem;padding-left: 0.2rem;"
          th:text="${product.integrity}+'%新'"></span>
    <span class="badge badge badge-info"
          style="background-color: #16a085;color: white;padding-right: 0.2rem;padding-left: 0.2rem;"
          th:if="${product.needSelf}" th:text="自取"></span>
    <span class="badge badge badge-info"
          style="background-color: #16a085;color: white;padding-right: 0.2rem;padding-left: 0.2rem;"
          th:if="${product.needMeet}" th:text="面交"></span>
    <span class="badge badge badge-info"
          style="background-color: #16a085;color: white;padding-right: 0.2rem;padding-left: 0.2rem;"
          th:if="${product.needExpress}" th:text="邮寄"></span>
</div>
<strong><p th:text="'¥'+${product.price}" style="color: red;" onclick="hide_add_comment(event);return false;"></p>
</strong>
<strong><p class="text-area" th:text="${product.title}" onclick="hide_add_comment(event);return false;"></p></strong>
<p class="text-area" th:text="${product.description}" onclick="hide_add_comment(event);return false;"></p>
<div id="content" onclick="hide_add_comment(event);return false;">
    <ul th:each="image : ${images}">
        <img th:src="${image.path}">
    </ul>
</div>
<input id="product_id" type="hidden" th:value="${product.id}">
<strong onclick="hide_add_comment(event);return false;"><p th:text="'留言 • '+${comment_num}"
                                                           style="padding-left: 0.2rem;font-size: 0.35rem;"></p>
</strong>
<hr class="pro_hr" onclick="hide_add_comment(event);return false;">
<div th:each="comment : ${comments}"
     th:onclick="show_add_comment([[${comment.userId}]],[[${comment.username}]],event,[[${comment.comment.id}]]);return false;"
     th:include="app_product/product_comment::master_comment(comment = comment)">
</div>
</body>
</html>